<!-- 设置页面 -->
<template>
  <view class="settings-page">
    <!-- 导航栏 -->
    <NavBar title="设置" showBack="true"></NavBar>
    
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 账户设置 -->
      <view class="settings-section">
        <view class="section-title">账户</view>
        <view class="setting-item" @click="navigateToApiKeySetting">
          <view class="setting-label">API Key</view>
          <view class="setting-value">{{ maskedApiKey }}</view>
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 提醒设置 -->
      <view class="settings-section">
        <view class="section-title">提醒</view>
        <view class="setting-item" @click="showReminderTimePicker">
          <view class="setting-label">每日提醒时间</view>
          <view class="setting-value">{{ dailyReminderTime }}</view>
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
        <view class="setting-item">
          <view class="setting-label">任务提醒</view>
          <uni-switch v-model="taskReminderEnabled"></uni-switch>
        </view>
        <view class="setting-item">
          <view class="setting-label">完成提醒</view>
          <uni-switch v-model="completionReminderEnabled"></uni-switch>
        </view>
      </view>
      
      <!-- 外观设置 -->
      <view class="settings-section">
        <view class="section-title">外观</view>
        <view class="setting-item" @click="showThemeSelector">
          <view class="setting-label">主题</view>
          <view class="setting-value">{{ currentTheme.label }}</view>
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
        <view class="setting-item" @click="showLanguageSelector">
          <view class="setting-label">语言</view>
          <view class="setting-value">{{ currentLanguage.label }}</view>
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 数据管理 -->
      <view class="settings-section">
        <view class="section-title">数据管理</view>
        <view class="setting-item" @click="backupData">
          <view class="setting-label">备份数据</view>
          <uni-icons type="download" size="18" color="#4CAF50"></uni-icons>
        </view>
        <view class="setting-item" @click="restoreData">
          <view class="setting-label">恢复数据</view>
          <uni-icons type="upload" size="18" color="#4CAF50"></uni-icons>
        </view>
        <view class="setting-item" @click="navigateToClearData">
          <view class="setting-label">清理数据</view>
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
        <view class="setting-item" @click="clearData">
            <view class="setting-label">清理缓存</view>
            <uni-icons type="trash" size="18" color="#999"></uni-icons>
          </view>
      </view>
      
      <!-- 关于 -->
      <view class="settings-section">
        <view class="section-title">关于</view>
        <view class="setting-item">
          <view class="setting-label">版本</view>
          <view class="setting-value">1.0.0</view>
        </view>
        <view class="setting-item">
          <view class="setting-label">开发者</view>
          <view class="setting-value">天才宝宝团队</view>
        </view>
        <view class="setting-item" @click="showPrivacyPolicy">
          <view class="setting-label">隐私政策</view>
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
        <view class="setting-item" @click="showTermsOfService">
          <view class="setting-label">服务条款</view>
          <uni-icons type="right" size="18" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 退出登录按钮 -->
      <view class="logout-container">
        <uni-button type="warn" @click="logout" plain>退出登录</uni-button>
      </view>
    </view>
    
    <!-- 时间选择器弹窗 -->
    <uni-popup ref="timePickerPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text @click="closeTimePickerPopup">取消</text>
          <text class="popup-title">选择提醒时间</text>
          <text @click="confirmTimePicker" class="confirm-text">确定</text>
        </view>
        <uni-datetime-picker
          ref="timePicker"
          v-model="tempReminderTime"
          type="time"
          :start="'00:00'"
          :end="'23:59'"
          show
        ></uni-datetime-picker>
      </view>
    </uni-popup>
  </view>
</template>

<script>
// 导入组件
import NavBar from '../../components/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      // 临时提醒时间（用于弹窗选择）
      tempReminderTime: '',
      // 任务提醒开关
      taskReminderEnabled: true,
      // 完成提醒开关
      completionReminderEnabled: true,
      // 主题选项
      themeOptions: [
        { value: 'light', label: '浅色' },
        { value: 'dark', label: '深色' },
        { value: 'system', label: '跟随系统' }
      ],
      // 当前主题
      currentTheme: { value: 'light', label: '浅色' },
      // 语言选项
      languageOptions: [
        { value: 'zh-CN', label: '中文简体' },
        { value: 'en-US', label: 'English' }
      ],
      // 当前语言
      currentLanguage: { value: 'zh-CN', label: '中文简体' }
    }
  },
  computed: {
    // 从Vuex获取API Key
    apiKey() {
      return this.$store.state.apiKey
    },
    
    // 从Vuex获取每日提醒时间
    dailyReminderTime() {
      return this.$store.state.dailyReminderTime
    },
    
    // 隐藏部分API Key字符
    maskedApiKey() {
      if (!this.apiKey) return '未设置'
      if (this.apiKey.length <= 8) return this.apiKey
      return this.apiKey.substring(0, 4) + '****' + this.apiKey.substring(this.apiKey.length - 4)
    }
  },
  methods: {
    // 跳转到API Key设置页面
    navigateToApiKeySetting() {
      uni.navigateTo({
        url: '/pages/apiKeySetting/apiKeySetting'
      })
    },
    
    // 跳转到清理数据页面
    navigateToClearData() {
      uni.navigateTo({
        url: '/pages/clearData/clearData'
      })
    },
    
    // 显示提醒时间选择器
    showReminderTimePicker() {
      this.tempReminderTime = this.dailyReminderTime
      this.$refs.timePickerPopup.open()
    },
    
    // 关闭时间选择器弹窗
    closeTimePickerPopup() {
      this.$refs.timePickerPopup.close()
    },
    
    // 确认时间选择
    confirmTimePicker() {
      this.$store.commit('setDailyReminderTime', this.tempReminderTime)
      this.$refs.timePickerPopup.close()
      uni.showToast({
        title: '提醒时间已设置',
        icon: 'success'
      })
    },
    
    // 显示主题选择器
    showThemeSelector() {
      // 这里可以实现主题选择逻辑
      uni.showActionSheet({
        itemList: this.themeOptions.map(option => option.label),
        success: (res) => {
          const selectedTheme = this.themeOptions[res.tapIndex]
          this.currentTheme = selectedTheme
          // 这里可以添加设置主题的逻辑
          uni.showToast({
            title: `主题已切换为${selectedTheme.label}`,
            icon: 'none'
          })
        }
      })
    },
    
    // 显示语言选择器
    showLanguageSelector() {
      // 这里可以实现语言选择逻辑
      uni.showActionSheet({
        itemList: this.languageOptions.map(option => option.label),
        success: (res) => {
          const selectedLanguage = this.languageOptions[res.tapIndex]
          this.currentLanguage = selectedLanguage
          // 这里可以添加设置语言的逻辑
          uni.showToast({
            title: `语言已切换为${selectedLanguage.label}`,
            icon: 'none'
          })
        }
      })
    },
    
    // 备份数据
    backupData() {
      // 这里可以实现数据备份逻辑
      uni.showToast({
        title: '数据备份功能开发中...',
        icon: 'none'
      })
    },
    
    // 恢复数据
    restoreData() {
      // 这里可以实现数据恢复逻辑
      uni.showToast({
        title: '数据恢复功能开发中...',
        icon: 'none'
      })
    },
    
    // 清理缓存
    clearData() {
      // 显示确认对话框
      uni.showModal({
        title: '确认清理',
        content: '确定要清理应用缓存吗？这不会删除您的任务数据。',
        success: (res) => {
          if (res.confirm) {
            // 这里可以实现清理缓存的逻辑
            uni.showToast({
              title: '缓存已清理',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 显示隐私政策
    showPrivacyPolicy() {
      uni.showModal({
        title: '隐私政策',
        content: '我们重视您的隐私保护...（隐私政策内容）',
        showCancel: false
      })
    },
    
    // 显示服务条款
    showTermsOfService() {
      uni.showModal({
        title: '服务条款',
        content: '请阅读并同意我们的服务条款...（服务条款内容）',
        showCancel: false
      })
    },
    
    // 退出登录
    logout() {
      // 显示确认对话框
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里可以实现退出登录的逻辑
            uni.showToast({
              title: '已退出登录',
              icon: 'success',
              duration: 1500,
              success: () => {
                // 可以跳转到登录页面
                // uni.reLaunch({ url: '/pages/login/login' })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.settings-page {
  padding-top: 88rpx; /* 导航栏高度 */
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  padding: 20rpx;
}

.settings-section {
  background-color: white;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.section-title {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f8f8f8;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item.delete .setting-label {
  color: #f44336;
}

.setting-label {
  font-size: 30rpx;
  color: #333;
}

.setting-value {
  font-size: 28rpx;
  color: #999;
  margin-right: 20rpx;
}

.logout-container {
  padding: 30rpx;
  text-align: center;
}

.popup-content {
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.confirm-text {
  color: #4CAF50;
  font-weight: bold;
}
</style>